<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>Dbird's Home</title>
    {% endblock %}
    {% block custom_css %}
        <link rel="stylesheet" href="{% static 'lib/uikit/css/uikit.css' %}"/>
        <link rel="stylesheet" href="{% static 'lib/uikit/css/components/search.css' %}"/>
        <link rel="stylesheet" href="{% static 'lib/font-awesome/css/font-awesome.css' %}">
        <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
        <style type="text/css">
            .uk-article-meta > span {
                margin: 0 2px;
            }

            .footer-context {
                margin: 10px auto;
                text-align: center;
            }

            #footer {
                background-color: #cbcbcb;
            }

            /*.uk-navbar-content > form {*/
            /*display: inline-block;*/
            /*}*/
        </style>
    {% endblock %}
    {% block custom_js %}
        <script src="{% static 'lib/jquery/jquery-1.11.1.js' %}"></script>
        <script src="{% static 'lib/uikit/js/uikit.js' %}"></script>
    {% endblock %}

</head>

<body>

<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

    <nav class="uk-navbar uk-margin-large-bottom">
        <a href="index.html" class="uk-navbar-brand uk-hidden-small"><img src="{% static 'logo.png' %}" alt="logo"></a>
        <ul class="uk-navbar-nav uk-navbar-center">

            <li><a href=""><i class="uk-icon-home"></i>首页</a></li>
            <li><a href=""><i class="uk-icon-laptop"></i>开发</a></li>
            <li><a href=""><i class="uk-icon-user"></i>运维</a></li>
            <li><a href=""><i class="uk-icon-book"></i>杂谈</a></li>
            <li><a href="about.html"><i class="uk-icon-info-circle"></i>关于</a></li>
        </ul>

        <div class="uk-navbar-flip">
            <div class="uk-navbar-content">
                <form class="uk-search" data-uk-search="{source:'my-results.json'}">
                    <input class="uk-search-field" type="search" placeholder="输入关键字...">
                    <input type="submit" class="uk-button-primary" value="搜索"> </input>
                </form>
            </div>
        </div>

    </nav>


    <div class="uk-grid">

        <div class="uk-width-medium-3-4">
            {% block left_article %}
                <article class="uk-article">

                    <h5 class="uk-article-lead">
                        <a href="post-detail.html">如何利用Django搭建博客</a>
                    </h5>

                    <p class="uk-article-meta">
                        <span class="uk-icon-clock-o">2017年3月15日 00:00</span>
                        <span class="uk-icon-eye">浏览(10)</span>
                        <span class="uk-icon-tags">评论(4)</span>
                    </p>
                    <p class="uk-article-meta">
                        <span class="label label-primary">标签1</span>
                        <span class="label label-primary">标签2</span>
                    </p>

                    <p>
                        <a href="layouts_post.html"><img width="900" height="300"
                                                         src=""
                                                         alt=""></a>
                    </p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum
                        dolore
                        eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui
                        officia
                        deserunt mollit anim id est laborum.</p>

                    <p>
                        <a class="uk-button uk-button-primary uk-float-right" href="layouts_post.html">
                            阅读全文&nbsp<span class="uk-icon-angle-double-right"></span>
                        </a>
                    </p>

                </article>

                <article class="uk-article">

                    <h5 class="uk-article-lead">
                        <a href="layouts_post.html">如何利用Django搭建博客</a>
                    </h5>

                    <p class="uk-article-meta">
                        <span class="uk-icon-clock-o">2017年3月15日 00:00</span>&nbsp&nbsp
                        <span class="uk-icon-eye">浏览(10)</span>
                        <span class="uk-icon-tags">评论(4)</span>
                    </p>
                    <p class="uk-article-meta">
                        <span class="label label-primary">标签1</span>
                        <span class="label label-primary">标签2</span>
                    </p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum
                        dolore
                        eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui
                        officia
                        deserunt mollit anim id est laborum.</p>

                    <p>
                        <a class="uk-button uk-button-primary uk-float-right" href="layouts_post.html">
                            阅读全文&nbsp<span class="uk-icon-angle-double-right"></span></a>
                    </p>

                </article>


                <ul class="uk-pagination">
                    <li class="uk-pagination-left uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span>
                    </li>
                    <li class="uk-active"><span>1</span></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><span>...</span></li>
                    <li><a href="#">20</a></li>
                    <li class="uk-pagination-right"><a href="#"><i class="uk-icon-angle-double-right"></i></a></li>
                </ul>
            {% endblock %}
        </div>


        {% block right_siderbar %}
            <div class="uk-width-1-4">
                <div class="uk-panel uk-panel-box uk-text-center">
                    <img class="uk-border-circle" width="120" height="120"
                         src="{% static 'photo.jpg' %}"
                         alt="">
                    <h3>dbird</h3>
                    <p>90后技术男一枚</p>
                    <a href="" class="uk-icon-github uk-icon-button"></a>
                    <a class="uk-icon-weibo uk-icon-button"></a>
                    <a class="uk-icon-wechat uk-icon-button"></a>
                    <a class="uk-icon-qq uk-icon-button"></a>
                </div>
                <div class="uk-panel">
                    <h3 class="uk-panel-title">文章归档</h3>
                    <ul class="uk-list uk-list-line">
                        <li><a href="#">2017</a></li>
                        <li><a href="#">2016</a></li>
                    </ul>
                </div>

                <div class="uk-panel">
                    <h3 class="uk-panel-title">最新文章</h3>
                    <ul class="uk-list uk-list-line">
                        <li><a href="">何如用Django搭建一个博客</a></li>
                        <li><a href="">如何进行高效的时间管理</a></li>
                        <li><a href="">毕业那些事</a></li>
                    </ul>
                </div>
            </div>
        {% endblock %}

    </div>
</div>

<footer id="footer">
    <div class="uk-container">
        <div class="footer-context">Copyright ©2017 by dbird &nbsp;&nbsp;|&nbsp;&nbsp;联系我&nbsp;
            <a href="mailto:dbird1995@163.com">dbird1995@163.com</a>
        </div>
    </div>
</footer>

</body>
</html>